<template>
    <div>

        <h1>更新门店</h1>
        <table class="table">
            <tbody>
                <tr>
                    <td>店名</td>
                    <td><input type="text" v-model="data.houseName"></td>
                </tr> 
                <tr>
                    <td>开店日期</td>
                    <td><input type="date" v-model="data.houseDate"></td>
                </tr> 
                <tr>
                    <td>店长名称</td>
                    <td><input type="text" v-model="data.useName"></td>
                </tr> 
                <tr>
                    <td>店长头像</td>
                    <td>
                        <input type="file" @change="imgurl">
                        <img :src="'https://localhost:7094'+data.useImg" style="height: 60px; width: 60px;">
                    </td>
                </tr> 
                <tr>
                    <td>店长电话</td>
                    <td><input type="text" v-model="data.usePhone"></td>
                </tr> 
                <tr>
                    <td>门店特点</td>
                    <td>
                        <span v-for="e in hh">
                            <input v-model="h"  type="checkbox" :value="e">{{ e }}
                        </span>
                    </td>
                </tr> 
                <tr>
                    <td>状态</td>
                    <td>
                        <input type="checkbox" v-model="data.state" checked>选择为启用,未选择为禁用
                    </td>
                </tr> 
                <tr>
                    <td class="2">
                      <input type="button" value="更新" @click="login">
                    </td> 
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue'
import axios from 'axios' 
import { useRouter,useRoute } from "vue-router";
import moment from 'moment'
onMounted(()=>{
    Gengxin();
})
const router=useRouter();
const route=useRoute();

const hh=ref(["免费停车","免费早餐","免费洗衣","免费上网"])
const h=ref([]);

const imgurl=(e:any)=>{
 var f = e.target.files[0];
 var fs= new FormData();

 fs.append("file",f);
 debugger

 if(f.size>1024*1024*2)
 {
alert("头像不能大于2MB")
return;
 }
 if(f.type!="image/png" && f.type!="image/jpeg" && f.type!="image/GIF")
 {
 alert("头像只能是JPEG、PNG、GIF格式")
 return;
 }
 axios.post("https://localhost:7094/api/Img",fs).then(res=>{
    data.value.useImg=res.data
 })


}

const data=ref({
  "id": 5,
  "houseName": "",
  "houseDate":"2025-05-03T09:18:39.043",
  "useName": "",
  "useImg": "",
  "usePhone": "",
  "houseTD": "",
  "isDelete": true,
  "state": true
})
const Gengxin=()=>{
   var vid= route.query.id;
   axios.get("https://localhost:7094/api/House/Getid",{params:{id:vid}}).then(res=>{
       data.value=res.data; 
       data.value.houseDate=moment(data.value.houseDate).format("YYYY-MM-DD");
       h.value=data.value.houseTD.split(',')
   })
}

const login=()=>{

    if(data.value.houseName=="")
{
 alert("门店名称不能为空");
 return;
}

if(data.value.useName=="")
{
 alert("店长名称不能为空");
 return;
}
if(data.value.usePhone!="18295964858")
{
 alert("电话11位");
 return;
}
if(data.value.houseTD==null)
{
 alert("门店特点最少选中一项");
 return;
}


    data.value.houseTD=h.value.toString();
    axios.put("https://localhost:7094/api/House/UpdateHouse",data.value).then(res=>{
        if(res.data>0)
       {
         alert("更新成功") 
         router.push({path:"/"}) 
       } 
      else
       {
         alert("更新失败")
         return;
       }
     
    })
}

</script>


<style scoped>

</style>